<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<f:view xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:a4j="http://richfaces.org/a4j">
	<head>
<meta charset="utf-8" />
<link href="../../www/css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="../../www/js/mon_script.js"></script>
<script type="text/javascript" src="../../www/js/jquery.js"></script>
<script type="text/javascript" src="../../www/js/jqueryRotate.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 

<title><ui:insert name="title">Roxxor's Game</ui:insert></title>
	</head>
	<body>
		<header>
			<div id="caroussel-conteneur">
				<img src="../../www/images/header/caroussel_tombRaider.jpg"
					style="display: block;" /> <img
					src="../../www/images/header/caroussel_baldursGate.jpg" /> <img
					src="../../www/images/header/caroussel_dmc.jpg" /> <img
					src="../../www/images/header/caroussel_full.jpg" /> <img
					src="../../www/images/header/caroussel_gravityRush.jpg" /> <img
					src="../../www/images/header/caroussel_halo4.jpg" /> <img
					src="../../www/images/header/caroussel_joker.jpg" /> <img
					src="../../www/images/header/caroussel_kdHeart.jpg" /> <img
					src="../../www/images/header/caroussel_lol.jpg" /> <img
					src="../../www/images/header/caroussel_queen.jpg" /> <img
					src="../../www/images/header/caroussel_skyrim.jpg" /> <img
					src="../../www/images/header/caroussel_assassinCreed.jpg" />
				<div id="header-searchform-wrapper-form">
					<f:view>
						 <h:form>
					       <h:inputText styleClass="nom-recherche" alt="Nom jeu" value="#{catalogueMB.nomRecherche}" onfocus="inputFocus(this);" onblur="inputBlur(this);"/>
					       <h:inputText styleClass="support-recherche" alt="Support : PS4, Gamecube.." value="#{catalogueMB.supportRecherche}" onfocus="inputFocus(this);" onblur="inputBlur(this);"/>
					       <h:inputText styleClass="genre-recherche" alt="Genre : Action, Tir.." value="#{catalogueMB.genreRecherche}" onfocus="inputFocus(this);" onblur="inputBlur(this);"/>
					       <h:commandButton styleClass="button-recherche" value="Rechercher" action="#{catalogueMB.afficherCatalogue}"/>
				      </h:form>
					</f:view>
				</div>
			</div>
			<div class="clear"></div>
		</header>

		<!-- Barre de connexion inscription à placement fixe -->
		<div id="header-menu-line-warper">
			<div id="header-connexion">
				<h1 id="header-titre">Roxxor's Game</h1>
				<a id="header-inscription" href="#">S'inscrire</a>&nbsp;|&nbsp; <a
					id="header-seConnecter" href="#">Se connecter</a> <a id="header-"></a>
			</div>
			<a href="/ProjetAtodWeb/pages/home/index.jsf"><img id="header-logo-bird"
				src="../../www/images/icones/icon_AngryBirds_128.png"></img></a> <img
				id="header-logo-pacman1"
				src="../../www/images/icones/icon_Pacman_1.png"></img> <img
				id="header-logo-pacman1"
				src="../../www/images/icones/icon_Pacman_2.png"></img> <img
				id="header-logo-pacman1"
				src="../../www/images/icones/icon_Pacman_3.png"></img>
			<div class="clear"></div>
		</div>
		<div class="clear"></div>
		<div class="container-principal">
			<h:form>
				<div class="header-menu">
					<div id="icons-support">
						<a href="#" title="Ps4" class="tooltip"> <h:commandButton
								image="../../www/images/icones/support/ps4.png"
								action="#{catalogueMB.iconSupport}">
								<f:param name="supportRecherche" value="Ps4"></f:param>
							</h:commandButton></a> <a href="#" title="DS 3D" class="tooltip"> <h:commandButton
								image="../../www/images/icones/support/Nintendo3DS.png"
								action="#{catalogueMB.iconSupport}">
								<f:param name="supportRecherche" value="Ds"></f:param>
							</h:commandButton></a> <a href="#" title="Xbox" class="tooltip"> <h:commandButton
								image="../../www/images/icones/support/xbox.png"
								action="#{catalogueMB.iconSupport}">
								<f:param name="supportRecherche" value="Xbox"></f:param>
							</h:commandButton></a> <a href="#" title="Nintendo DS" class="tooltip"> <h:commandButton
								image="../../www/images/icones/support/ds.png"
								action="#{catalogueMB.iconSupport}">
								<f:param name="supportRecherche" value="Ds"></f:param>
							</h:commandButton></a> <a href="#" title="Pc" class="tooltip"> <h:commandButton
								image="../../www/images/icones/support/pc.png"
								action="#{catalogueMB.iconSupport}">
								<f:param name="supportRecherche" value="Pc"></f:param>
							</h:commandButton></a> <a href="#" title="Nes" class="tooltip"> <h:commandButton
								image="../../www/images/icones/support/NesPad.png"
								action="#{catalogueMB.iconSupport}">
								<f:param name="supportRecherche" value="Nes"></f:param>
							</h:commandButton></a>
					</div>
				</div>
			</h:form>
	
			
			<div id="sidebar-float-right"></div>
			<div id="sidebar-float-left"></div>
			<div id="sidebar-centre">
				<ui:insert name="content" />
			</div>
		</div>

		<div class="clear"></div>
		<footer>
		<div id="footer-content">
			<div class="footer-column">
				<p>Le concept</p>
				<ul>
					<li><a href="#">Comment ça marche ?</a></li>
					<li><a href="#">Besoin d'aide ?</a></li>
					<li><a href="#">Conditions Générales d'Utilisations</a></li>
				</ul>
			</div>
			<div class="footer-column">
				<p>A propos</p>
				<ul>
					<li><a href="#">Qui sommes-nous ?</a></li>
					<li><a href="#">Contactez-nous</a></li>
					<li><a href="#">Ils parlent de nous</a></li>
				</ul>
			</div>
			<div class="footer-column">
				<p>suivez nous</p>
				<ul>
					<li><img src="../../www/images/icones/icon_facebook_52x52.png"
						style="width: 30px; height: 30px;"> <a
							href="https://fr-fr.facebook.com/">&nbsp;&nbsp;Facebook</a> </img></li>
					<li><img src="../../www/images/icones/icon_twitter_52x52.png"
						style="width: 30px; height: 30px;"> <a
							href="https://twitter.com/">&nbsp;&nbsp;Twitter</a> </img></li>
					<li><img
						src="../../www/images/icones/icon_grooveshark_52x52.png"
						style="width: 30px; height: 30px;"> <a
							href="http://grooveshark.com/">&nbsp;&nbsp;GrooveShark</a> </img></li>
				</ul>
			</div>
			<div class="footer-column">
				<p>paiement securisé</p>
				<ul>
					<li><img src="../../www/images/icones/icon-payment.png"></img></li>
				</ul>
			</div>
		</div>
		</footer>
	</body>
</f:view>